import React, {useState, useEffect} from 'react';
import {Table, Tag, Button, Modal, Popover, Switch } from 'antd'
import axios from 'axios';
import {
    DeleteOutlined,
    EditOutlined
  } from '@ant-design/icons';
const { confirm } = Modal

//react函数组件
const RightLsit = () => {
    //状态
    const [dataSource, setdataSource] = useState([]);
    // table表格
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id)=>{
                return <b>{id}</b>
            }
        },
        {
            title: '权限名称',
            dataIndex: 'title',
        },
        {
            title: '权限路径',
            dataIndex: 'key',
            render: (key)=>{
                return <Tag color="orange">{key}</Tag>
            }
        },
        {
            title: '操作',
            render: (item)=>{
                return <div>
                    <Button type="primary" shape="circle"  danger icon={<DeleteOutlined />} 
                    onClick={()=>confirMothod(item)}
                    />
                    &nbsp;
                    <Popover content={
                    <div>
                        <Switch size="small" checked={item.pagepermisson} 
                        defaultChecked  onChange={()=>switchMentod(item)} style={{textAlign: "content"}}/>
                    </div>} title="配置项" 
                    trigger={item.pagepermisson === undefined ? "" : "click"}>
                        {/* button */}
                        <Button type="primary" shape="circle" icon={<EditOutlined />} 
                        disabled={item.pagepermisson === undefined}/>

                    </Popover>
                </div>
            }
        },
      ];
    //删除弹框
    const confirMothod = (item) => {
        confirm({
            title: '您确定删除吗',
            icon: <EditOutlined />,
            onOk(){
                deleteMethod(item)
            },
            onCancel(){
                console.log("Can")
            }
        })
    }
    // 确认删除
    const deleteMethod = (item) => {
        // console.log(item)
        if (item.grade === 1) {
            setdataSource (dataSource.filter(data=>data.id!==item.id))
            axios.delete(`/rights/${item.id}`)
        }else{
            let list = dataSource.filter(data => data.id === item.rightId)
            list[0].children = list[0].children.filter(data=>data.id!==item.id)
            setdataSource([...dataSource])
            axios.delete(`/children/${item.id}`)
        }
    }
    //switch开关
    const switchMentod = (item) => {
       item.pagepermisson = item.pagepermisson===1?0:1
       setdataSource([...dataSource])
       if (item.grade === 1) {
           axios.patch(`/rights/${item.id}`, {
            pagepermisson: item.pagepermisson
           })
       }else{
        axios.patch(`/children/${item.id}`, {
            pagepermisson: item.pagepermisson
           })
       }
    }

    useEffect(()=>{
        axios.get('/rights?_embed=children').then(res=>{
            res.data.forEach(item => {
                if (item.children.length===0) {
                    item.children=""
                }
            })
            setdataSource(res.data)
        })
    },[])
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
                pageSize:5
            }}/>;
        </div>
    );
};

export default RightLsit;